<!doctype html>
<html>
<head>
    <title>Icon buttons in popup</title>
    <meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

    <script src="../../codebase/webix/webix.js" type="text/javascript"></script>
    <script src="../../codebase/spreadsheet.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="../../codebase/webix/webix.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/spreadsheet.css">

    <script src="../common/data.js"></script>

    <style>
        .myicon_chart{
            background: url("images/chart.svg");
        }

        .myicon_image{
            background: url("images/image.svg");
        }
        .myicon_bar_chart{
            background: url("images/bar-chart.svg");
        }
        .myicon_line_chart{
            background: url("images/line-chart.svg");
        }
        .myicon_pie_chart{
            background: url("images/pie-chart.svg");
        }
    </style>
</head>
<body>
<script type="text/javascript">


    webix.ui({
        id: "mypopup",
        view: "datasuggest",
        body:{
            view: "ssheet-icons",
            xCount:3,
            yCount:1,
            tooltip: {
                template: "#value#"
            }
        },
        data: [
            {id: "insert_image", css: "myicon_bar_chart", value: "Bar"},
            {id: "insert_chart", css: "myicon_line_chart",  value: "Line"},
            {id: "insert_column", css: "myicon_pie_chart", value: "Pie"}
        ]
    });
    webix.ready(function(){
        webix.ui({
            view:"spreadsheet",
            data: base_data,
            buttons: {
                "undo-redo": ["undo","redo"],
                "font": ["font-family","font-size","font-weight","font-style","text-decoration","color","background","borders"],
                "align": ["text-align","vertical-align","wrap","span"],
                "number": ["format"],
                "Insert": [
                    {
                        view: "button", type:"htmlbutton", name: "a", width: 40,
                        label: "<span class='webix_ssheet_button_icon myicon_image'></span>",
                        tooltip: "Insert image"
                    },
                    {
                        view: "button", type:"htmlbutton", name: "b", width: 40,
                        label: "<span class='webix_ssheet_button_icon myicon_chart'></span>",
                        tooltip: "Insert chart", popup: $$("mypopup")
                    }
                ]
            }
        });
    });
</script>
</body>
</html>